<template>
  <div>
    <el-row >
      <el-col :span="1"></el-col>
      <el-col :span="22">
        <el-row :gutter="15">
          <el-col :span="6">
            <el-card>

              <el-row>
                <span style="font-size: 13px">今日登记人数</span>
              </el-row>
              <el-row style="height: 45px;margin-top: 18px">
                <span style="font-size: 42px;align-items: center">{{todayManNumber}}</span>
                <span style="font-size: 20px;margin-top: 17px">人</span>
              </el-row>
              <el-row style="margin-top: 20px;font-size:13px ">
                <span v-if="todayManyOrLess < 0 ">较昨日减少{{todayCompare}}人 &nbsp;&nbsp;</span>
                <span v-else-if="todayManyOrLess > 0 ">较昨日增加{{todayCompare}}人 &nbsp;&nbsp;</span>
                <span v-else>与昨日持平 &nbsp;&nbsp;</span>
                <el-icon v-if="todayManyOrLess > 0" color="green" size="20"><CaretTop /></el-icon>
                <el-icon v-if="todayManyOrLess <0" color="red" size="20"><CaretBottom /></el-icon>
              </el-row>
              <el-row style="margin-top: 20px;font-size: 13px">
                <a style="text-decoration: underline">查看详情</a>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>

              <el-row>
                <span style="font-size: 13px">本周登记人数</span>
              </el-row>
              <el-row style="height: 45px;margin-top: 18px">
                <span style="font-size: 42px;align-items: center">{{toweekManNumber}}</span>
                <span style="font-size: 20px;margin-top: 17px">人</span>
              </el-row>
              <el-row style="margin-top: 20px;font-size:13px ">
                <span v-if="toweekManyOrLess < 0 ">较上周减少{{toweekCompare}}人 &nbsp;&nbsp;</span>
                <span v-else-if="toweekManyOrLess > 0 ">较上周增加{{toweekCompare}}人 &nbsp;&nbsp;</span>
                <span v-else>与上周持平 &nbsp;&nbsp;</span>
                <el-icon v-if="toweekManyOrLess > 0" color="green" size="20"><CaretTop /></el-icon>
                <el-icon v-if="toweekManyOrLess <0" color="red" size="20"><CaretBottom /></el-icon>
              </el-row>
              <el-row style="margin-top: 20px;font-size: 13px">
                <a >查看详情</a>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>

              <el-row>
                <span style="font-size: 13px">本月登记人数</span>
              </el-row>
              <el-row style="height: 45px;margin-top: 18px">
                <span style="font-size: 42px;align-items: center">{{tomoonManNumber}}</span>
                <span style="font-size: 20px;margin-top: 17px">人</span>
              </el-row>
              <el-row style="margin-top: 20px;font-size:13px ">
                <span v-if="tomoonManyOrLess < 0 ">较上月减少{{tomoonCompare}}人 &nbsp;&nbsp;</span>
                <span v-else-if="tomoonManyOrLess > 0 ">较上月增加{{tomoonCompare}}人 &nbsp;&nbsp;</span>
                <span v-else>与上月持平 &nbsp;&nbsp;</span>
                <el-icon v-if="tomoonManyOrLess > 0" color="green" size="20"><CaretTop /></el-icon>
                <el-icon v-if="tomoonManyOrLess <0" color="red" size="20"><CaretBottom /></el-icon>
              </el-row>
              <el-row style="margin-top: 20px;font-size: 13px">
                <a >查看详情</a>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>

              <el-row>
                <span style="font-size: 13px">登记总人数</span>
              </el-row>
              <el-row style="height: 45px;margin-top: 18px">
                <span style="font-size: 42px;align-items: center">{{totalManNumber}}</span>
                <span style="font-size: 20px;margin-top: 17px">人</span>
              </el-row>
              <el-row style="margin-top: 20px;font-size:13px ">
                <span v-if="toyearManyOrLess < 0 ">较上一年减少{{toyearCompare}}人 &nbsp;&nbsp;</span>
                <span v-else-if="toyearManyOrLess > 0 ">较上一年增加{{toyearCompare}}人 &nbsp;&nbsp;</span>
                <span v-else>与上一年持平 &nbsp;&nbsp;</span>
                <el-icon v-if="toyearManyOrLess > 0" color="green" size="20"><CaretTop /></el-icon>
                <el-icon v-if="toyearManyOrLess <0" color="red" size="20"><CaretBottom /></el-icon>
              </el-row>
              <el-row style="margin-top: 20px;font-size: 13px">
                <a >查看详情</a>
              </el-row>
            </el-card>
          </el-col>

        </el-row>

      </el-col>
      <el-col :span="1"></el-col>
    </el-row>
  </div>

  <div style="margin-top: 20px ;overflow: hidden">
    <el-row :gutter="25">
      <el-col :span="1"></el-col>
      <el-col :span="11" >
        <el-card>
        <el-row style="display: flex; align-items: center; justify-content: space-between; padding: 0 20px;">
          <!-- 左侧内容：登记内容分布 -->
          <div>
            <span>借阅内容分布</span>
          </div>
          <!-- 右侧内容：日期选择器 -->
          <div>
            <el-date-picker
                v-model="value2"
                type="daterange"
                range-separator="——"
                start-placeholder="开始日期"
                end-placeholder="截止日期"
            />
          </div>
        </el-row>
        <hr style="border: none;height: 1px;background-color: transparent;border-top: 1px solid rgba(0, 0, 0, 0.3);margin: 20px 0;">
        <div class="chart-containerSecond" ref="chartContainerSecond">
          <!-- 图表将渲染在这里 -->
        </div>
        </el-card>
      </el-col>
      <el-col :span="11" >
        <el-card>
        <el-row style="display: flex; align-items: center; justify-content: space-between; padding: 0 20px;">
          <!-- 左侧内容：登记内容分布 -->
          <div>
            <span>借阅人数趋势</span>
          </div>
          <!-- 右侧内容：日期选择器 -->
          <div>
            <el-date-picker
                v-model="value1"
                type="daterange"
                range-separator="——"
                start-placeholder="开始日期"
                end-placeholder="截止日期"
            />
          </div>
        </el-row>

        <hr style="border: none;height: 1px;background-color: transparent;border-top: 1px solid rgba(0, 0, 0, 0.3);margin: 20px 0;">
        <div class="chart-containerFirst" ref="chartContainerFirst">
          <!-- 图表将渲染在这里 -->
        </div>
        </el-card>
      </el-col>

      <el-col :span="1"></el-col>
    </el-row>
  </div>


</template>

<script setup>
import { onBeforeUnmount } from 'vue';
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const chartContainerFirst = ref(null);
const chartContainerSecond=ref(null);


let myChartFirst = null;
let myChartSecond= null;





var optionSecond={
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['病案首页', '护理记录', '化验单', '出院记录', '手术同意书', '入院记录', '医嘱单','麻醉同意书'],
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '登记次数',
      type: 'bar',
      barWidth: '20%',
      data: [10, 52, 200, 334, 390, 330, 100,355]
    }
  ]
}

var optionFirst = {
  xAxis: {
    type: 'category',
    //下面的data对应的是日期  这个值来自于日期选择器1
    data: ['1-1', '1-2', '1-3', '1-4', '1-5', '1-6', '1-7','1-8', '1-9', '1-10', '1-11', '1-12', '1-13', '1-14','1-15', '1-16', '1-17', '1-18', '1-19', '1-20', '1-21'],
    axisLabel: {
      formatter: function (value) {
        // 此处value已经是'几-几'的格式，所以直接返回即可
        return value;
      }
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {//下面的data是对应每天的数值

      data: [820, 932, 901, 934, 1290, 1330, 1320,223,424,353,656,2131,435,675,234,213,223,253,732,1032,434,555],
      type: 'line',
      smooth: true
    }
  ]
};


onMounted(() => {
  //第一个表
  if (chartContainerFirst.value) {
    myChartFirst = echarts.init(chartContainerFirst.value);
    myChartFirst.setOption(optionFirst);

    // 监听窗口大小变化，以响应式地调整图表大小
    window.addEventListener('resize', () => {
      myChartFirst.resize();
    });
  }
  //第二个表
  if (chartContainerSecond.value) {
    myChartSecond = echarts.init(chartContainerSecond.value);
    myChartSecond.setOption(optionSecond);

    // 监听窗口大小变化，以响应式地调整图表大小
    window.addEventListener('resize', () => {
      myChartSecond.resize();
    });
  }




});

onBeforeUnmount(() => {
  // 清理资源
  if (myChartFirst) {
    myChartFirst.dispose();
    window.removeEventListener('resize', myChartFirst.resize);
  }
  if (myChartSecond) {
    myChartSecond.dispose();
    window.removeEventListener('resize', myChartSecond.resize);
  }

});

//这是日期选择器1
const value1 = ref('')
//这是日期选择器2
const value2 = ref('')
// 这个是后端查询今天的所有登记的人人数
const todayManNumber=ref(30)

//查询后端返回回来的值的多少  就是条件查询今天的和昨天登记的人数的多少
const todayManyOrLess=ref(-5)
// 这里面的是绝对值化了的人数差
const todayCompare=ref(Math.abs(todayManyOrLess.value)
)

// 这个是后端查询这周的所有登记的人人数
const toweekManNumber=ref(200)

//查询后端返回回来的值的多少  就是条件查询这周的和上周登记的人数的多少
const toweekManyOrLess=ref(20)
// 这里面的是绝对值化了的人数差
const toweekCompare=ref(Math.abs(toweekManyOrLess.value)
)


// 这个是后端查询这月的所有登记的人人数
const tomoonManNumber=ref(800)

//查询后端返回回来的值的多少  就是条件查询这月的和上月登记的人数的多少
const tomoonManyOrLess=ref(-120)
// 这里面的是绝对值化了的人数差
const tomoonCompare=ref(Math.abs(tomoonManyOrLess.value)
)


// 这个是后端查询这月的所有登记的人人数
const totalManNumber=ref(2966)

//查询后端返回回来的值的多少  就是条件查询这月的和上月登记的人数的多少
const toyearManyOrLess=ref(-98)
// 这里面的是绝对值化了的人数差
const toyearCompare=ref(Math.abs(toyearManyOrLess.value)
)

</script>

<style scoped>
.chart-containerFirst {
  width: 100%; /* 占满父容器宽度 */
  min-height: 500px; /* 设置最小高度，根据需要调整 */
  /* 如果您想要容器在页面上居中（不推荐，因为这通常用于块级元素）
   * 可以使用 Flexbox 或 Grid 布局在外部容器上设置，而不是这里
   */
  /* display: flex;
  justify-content: center;
  align-items: center;
  但请注意，这会使容器内的所有内容都居中，而不仅仅是图表 */
}
.chart-containerSecond {
  width: 100%; /* 占满父容器宽度 */
  min-height: 500px; /* 设置最小高度，根据需要调整 */
  /* 如果您想要容器在页面上居中（不推荐，因为这通常用于块级元素）
   * 可以使用 Flexbox 或 Grid 布局在外部容器上设置，而不是这里
   */
  /* display: flex;
  justify-content: center;
  align-items: center;
  但请注意，这会使容器内的所有内容都居中，而不仅仅是图表 */
}

</style>
